import Vue from 'vue'
import store from '../store';
const hostname= location.hostname;
Vue.directive('drag-modal', (el, bindings, vnode) => {
	Vue.nextTick(() => {
		let {
			visible,
			destroyOnClose
		} = vnode.componentInstance
		// 防止未定义 destroyOnClose 关闭弹窗时dom未被销毁，指令被重复调用
		if (!visible) return
		let modal = el.getElementsByClassName('ant-modal')[0]
		let header = el.getElementsByClassName('ant-modal-header')[0]
		//自定义头部样式
		let content = el.getElementsByClassName('ant-modal-content')[0]
		let headerTitle = el.getElementsByClassName('ant-modal-title')[0]
		let closeX = el.getElementsByClassName('ant-modal-close-icon')[0]
		//自定义底部样式
		let footer = el.getElementsByClassName('ant-modal-footer')[0];
		let cancelBtn = '';
		let okBtn = '';
		if (!!footer) {
			let cancelBtn = footer.getElementsByClassName('ant-btn')[0]
			let okBtn = footer.getElementsByClassName('ant-btn ant-btn-primary')[0]
		}
		let left = 0
		let top = 0

		// 未定义 destroyOnClose 时，dom未被销毁，关闭弹窗再次打开，弹窗会停留在上一次拖动的位置
		if (!destroyOnClose) {
			left = modal.left || 0
			top = modal.top || 0
		}
		if (header) {
			header.style.cursor = 'all-scroll';
			//自定义头部样式
			header.style.background =store.state.isPro?'#5697F5':'#00BEC5';
			header.style.borderRadius = '10px 10px 0 0';
			headerTitle.style.color = '#fff';
			headerTitle.style.fontSize = '18px';
		}


		content.style.borderRadius = '10px';
		if (closeX) {
			closeX.style.padding = '5px 10px';
			closeX.style.background = 'rgb(190, 202, 212)';
			closeX.style.borderRadius = '6px';
			closeX.style.color = '#fff';
		}

		//自定义底部样式
		if (footer) {
			footer.style.borderTop = 'none';
			footer.style.textAlign = 'center';
			footer.style.padding = '10px 0 30px';
		}
		if (cancelBtn) {
			cancelBtn.style.background = '#BECAD4';
			cancelBtn.style.color = '#4D5053';
			cancelBtn.style.width = '130px';
			cancelBtn.style.fontSize = '18px';
			cancelBtn.style.borderRadius = '23px';
			cancelBtn.style.height = '36px';
			cancelBtn.style.marginRight = '30px';
		}
		if (okBtn) {
			okBtn.style.width = '130px';
			okBtn.style.fontSize = '18px';
			okBtn.style.borderRadius = '23px';
			okBtn.style.height = '36px';
		}

		// top 初始值为 offsetTop
		top = top || modal.offsetTop
		header.onmousedown = e => {
			let startX = e.clientX;
			let startY = e.clientY;
			header.left = header.offsetLeft;
			header.top = header.offsetTop;

			el.onmousemove = event => {
				let endX = event.clientX;
				let endY = event.clientY;
				modal.left = header.left + (endX - startX) + left;
				modal.top = header.top + (endY - startY) + top;
				modal.style.left = modal.left + 'px'
				modal.style.top = modal.top + 'px'
			}
			el.onmouseup = event => {
				left = modal.left
				top = modal.top
				el.onmousemove = null;
				el.onmouseup = null;
				header.releaseCapture && header.releaseCapture();
			}
			header.setCapture && header.setCapture();
		}
	})
})